import React, { useEffect, useState } from 'react'
import { Uploader, NavBar, Toast, Input, Cell, Form, Picker, Cascader, Field } from 'react-vant'
import { useNavigate } from 'react-router-dom'
import axios from '../lsjuilt/lsjindex.jsx'
import "../css3/new3.scss"
import 'animate.css';
const defaultValue = [
  {
    url: 'https://img.zcool.cn/community/0198c45cbcc0dca801214168264eae.jpg@1280w_1l_2o_100sh.jpg', // 图片文件
  },

]

export default function News3() {

  const navigate = useNavigate()
  const [value, setValue] = useState('');//书名
  const [value2, setValue2] = useState('');//作者
  const [value3, setValue3] = useState(''); //出版社
  const [value4, setValue4] = useState('');//ISBN
  const [value1, setValue1] = useState('') // 描述
  const [value5, setValue5] = useState('') //类型1
  const [value8, setValue8] = useState('') //类型2
  const [value6, setValue6] = useState('') //新旧程度
  const [value7, setValue7] = useState('') //地区
  const [typeLs,setTypeLs]=useState([])


  const [form] = Form.useForm()

  const onFinish = values => {
    console.log(values, 1111111)
  }
  let test=async ()=>{ //获取类别
    let res=await axios.get('/type')
    console.log(res.data,'data')
    if(res.data.code===200){
      console.log(res.data.data,'data');
      setTypeLs(res.data.data)
    }
  }
  useEffect(()=>{
    test()
  },[])
  return (
    <div className='animate__animated animate__rotateInDownLeft'>

      {/* 返回 */}
      <NavBar
        title="商品信息"
        onClickLeft={() => Toast('返回', navigate('/sellbook3'))}
      />



      <div>
        {/* 书名 */}
        <Cell>
          <Input
            placeholder="请输入书名"
            value={value}
            onChange={setValue}
            clearable
            clearTrigger="always"
          />
        </Cell>

        {/* 作者 */}
        <Cell>
          <Input
            placeholder="请输入作者"
            value={value2}
            onChange={setValue2}
            clearable
            clearTrigger="always"
          />
        </Cell>



        {/* 出版社 */}
        <Cell>
          <Input
            placeholder="请输入出版社"
            value={value3}
            onChange={setValue3}
            clearable
            clearTrigger="always"
          />
        </Cell>

        {/* ISBN */}
        <Cell>
          <Input
            placeholder="请输入ISBN"
            value={value4}
            onChange={setValue4}
            clearable
            clearTrigger="always"
          />
        </Cell>


        <div>
          <Form onFinish={onFinish}>
            <Form.Item
              isLink
              name='picker'
              // label='品相'
              trigger='onConfirm'
              onClick={(_, action) => {
                action.current?.open()
              }}
            >
              <Picker
                popup
                onConfirm={(val)=>{setValue6(val)}}
                columns={[
                  '九成新',
                  '八成新',
                  '七成新',
                  '六成新',
                  '五成新',
                  '四成新',
                  '三成新',
                  '二成新',
                  '一成新',
                ]}
              >
                {val => value6 || '请选择品相'}
              </Picker>
            </Form.Item>
            {/* <Form.Item
              isLink
              name='picker2'
              // label='城市选择'
              trigger='onConfirm'
              onClick={(_, action) => {
                action.current?.open()
              }}
            >
              <Picker
                popup
                columns={[
                  '教材教辅',
                  '文学小说',
                  '经管励志',
                  '人文社科',
                  '生活艺术',
                  '计算机类',
                  '职业技能',
                ]}
              >
                {val => val || '图书类型'}
              </Picker>
            </Form.Item> */}

            <Form.Item
              isLink
              name='picker'
              // label='城市选择'
              trigger='onConfirm'
              onClick={(_, action) => {
                action.current?.open()
              }}
            >
              <Picker
                popup
                onConfirm={(val)=>{setValue7(val)}}
                columns={[
                  '北京',
                  '上海',
                  '南京',
                  '苏州',
                  '常州',
                  '淮安',
                  '扬州',
                  '南通',
                  '宿迁',
                  '泰州',
                  '无锡',
                ]}
              >
                {val => value7 || '商品位置'}
              </Picker>
            </Form.Item>

            {/* <button type='primary' htmlType='submit'>提交</button> */}
          </Form>

          <Cascader
            popup={{ round: true }}
            fieldNames={{
              text: 'name',
              value: '_id',
              children: 'children',
            }}
            onFinish={(v) =>{setValue5(v[0]);setValue8(v[1])}}
            title='请选择图书类别'
            options={typeLs}
          >
            {(value, selectedRows, actions) => (
              <Field
                isLink
                value={selectedRows.map(el => el.name).join(',')}
                readOnly
                label='类别'
                placeholder='请选择图书类别'
                onClick={() => actions.open()}
              />
            )}
          </Cascader>


        </div>
      </div>
      {/* 上传 */}
      <Uploader
        accept='*'
        defaultValue={defaultValue}
        onChange={v => console.log(v)}
      />

      <br />
      <input type="text" placeholder="添加描述" style={{ width: "98vw", height: "100px", border: "none", fontSize: "16px" }} value={value1} onChange={(e) => setValue1(e.target.value)} />

      {/* 按钮 */}
      <button className='queding1'
        onClick={async () => {
          let obj={ name: value, author: value2, press: value3, isbn: value4, describe: value1, image: defaultValue[0].url,pinxiang:value6,location:value7,typeOneId:value5,typeTwoId:value8 }
          console.log(obj);
          // let { data: { code } } = await axios.post("/add", obj)
          // if (code === 200) {
          //   Toast.success('出价成功')
          //   navigate('/issue3',{state:{...obj}})
          // }
            navigate('/issue3',{state:{...obj}}) 
        }}
      // onClick={() => {
      //   navigate('/issue3')
      // }}
      >出价</button>



    </div>
  )
}
